.system-detail {
    padding: 0 24rpx 150rpx 24rpx;

    .uni-sroll {
        padding: 0 24rpx 24rpx 24rpx;
        background: #ffffff;
    }

    .container-tabs-list {
        height: calc(100vh - 730rpx);
        background-color: #fff;

        .container-tabs-swiper {
            height: 100%;
        }
    }

    .list {
        border-radius: 4rpx;

        .box {
            padding: 0 24rpx;
            margin-bottom: 16rpx;
            background: #ffffff;

            .title {
                margin-bottom: 25rpx;
                height: 92rpx;
                border-bottom: 1px solid #e6edf0;

                .arrow {
                    width: 12rpx;
                    height: 12rpx;
                    border-radius: 50%;
                    background: #197adb;
                }

                .txt {
                    font-size: 32rpx;
                    color: #1e2021;
                    font-weight: bold;
                    margin-left: 16rpx;
                }

                .status {
                    font-size: 24rpx;
                    color: #16b777;
                    font-weight: bold;
                }
            }

            .hr-title {
                font-size: 30rpx;
                color: #1e2021;
                font-weight: bold;
                padding: 0 0 24rpx 0;
            }

            .text-box {
                padding-bottom: 20rpx;

                &.bor {
                    padding-top: 20rpx;
                    border-top: 1px solid #e6edf0;
                }

                &.bor-bottom {
                    margin-bottom: 20rpx;
                    border-bottom: 1px solid #e6edf0;

                    &:last-child {
                        margin-bottom: 0;
                        border-bottom: none;
                    }
                }

                .t1 {
                    width: 148rpx;
                    font-size: 24rpx;
                    color: #6e767a;
                    white-space: normal;
                }

                .t2 {
                    font-size: 24rpx;
                    color: #404547;
                }

                .link {
                    font-size: 24rpx;
                    color: #197adb;
                    font-weight: bold;
                }

                .w1 {
                    width: 280rpx;
                }

                .w2 {
                    width: 168rpx;
                }
            }

            .pic-box {
                padding-bottom: 20px;

                &.bor {
                    padding-top: 20rpx;
                    border-top: 1px solid #eee;
                }

                .t1 {
                    width: 148rpx;
                    font-size: 24rpx;
                    color: #6e767a;
                    white-space: normal;
                }

                .pic-item {
                    width: calc(100% - 148rpx);
                    overflow: hidden;
                    flex-wrap: wrap;

                    .pic {
                        width: 100rpx;
                        height: 80rpx;
                        margin-right: 10rpx;
                        margin-bottom: 10rpx;
                        border-radius: 4rpx;
                    }
                }
            }

            .view-all {
                height: 80rpx;
                border-top: 1px solid #e6edf0;

                .tt {
                    font-size: 24rpx;
                    color: #197adb;
                }

                .iconfont {
                    margin-left: 14rpx;
                    font-size: 13rpx;
                    color: #9daaad;
                }
            }
        }

        .change {
            background: #ffffff;

            .change-box {
                height: 75rpx;
                font-size: 24rpx;
                color: #6e767a;
                border: 1px solid #e6edf0;
                border-bottom: none;
                padding: 0 24rpx;

                &:last-child {
                    border-bottom: 1px solid #e6edf0;
                }

                .left {
                    flex: 0 0 20%;
                    height: 100%;
                    border-right: 1px solid #e6edf0;
                }

                .right {
                    position: relative;
                    padding-left: 24rpx;
                    height: 100%;
                    flex: 0 0 80%;

                    .t1 {
                        width: 100%;
                        text-align: right;
                        color: #197adb;
                    }

                    .change-ico {
                        position: absolute;
                        left: 0;
                        right: 0;
                        text-align: center;

                        .iconfont {
                            color: #197adb;
                            font-size: 66rpx;
                        }
                    }
                }
            }
        }

        .icon-sanjiaoxing.rotate {
            transform: rotate(180deg);
            transition: transform 0.3s ease;
        }

        .icon-sanjiaoxing {
            transition: transform 0.3s ease;
        }

    }

    .btn-box {
        position: fixed;
        bottom: 35rpx;
        left: 0;
        right: 0;
        padding: 0 24rpx;

        .btn-wrap {
            gap: 10rpx;

            .row {
                flex: 1;
            }

            .canel {
                height: 70rpx;
                background: #ffffff;
                border-radius: 4rpx;
                font-size: 28rpx;
                color: #197adb;
                border: 1px solid #197adb;
            }

            .back {
                height: 70rpx;
                background: #ffb800;
                border-radius: 4rpx;
                font-size: 28rpx;
                color: #ffffff;
            }

            .confirm {
                height: 70rpx;
                background: #1226aa;
                border-radius: 4rpx;
                font-size: 28rpx;
                color: #ffffff;

                &.disabled {
                    opacity: 0.5;
                }
            }
        }
    }
}

.popup-content {
    padding: 0 24rpx 24rpx 24rpx;
    border-radius: 20rpx;

    .title {
        height: 92rpx;
        font-size: 32rpx;
        color: #1e2021;
        font-weight: bold;
    }

    .uni-file-picker {
        .uni-file-picker-title {
            width: 77px;
            text-align: right;
            font-size: 14px;
            color: #606266;
            padding-right: 12px;
        }

        .upload-pic-show {
            position: relative;
            margin-right: 24rpx;

            .pic {
                width: 120rpx;
                height: 120rpx;
            }

            .icon-close {
                position: absolute;
                top: -6px;
                right: -4px;
                font-size: 18px;
                color: red;
                z-index: 9999;
            }
        }

        .uni-file-btn {
            width: 120rpx;
            height: 120rpx;
            border: 1px solid #dcdae2;
            border-radius: 5px;

            .iconfont {
                font-size: 30px;
                color: #dcdae2;
            }
        }
    }

    .popup-btn {
        width: 100%;
        margin-top: 36rpx;

        .canel {
            width: 48%;
            height: 70rpx;
            background: #ffffff;
            border-radius: 4rpx;
            border: 1px solid #197adb;
            font-size: 28rpx;
            color: #197adb;
        }

        .confirm {
            width: 48%;
            height: 70rpx;
            background: #1226aa;
            border-radius: 4rpx;
            font-size: 28rpx;
            color: #ffffff;
        }
    }
}

.contract-list-popup {
    width: 100vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;

    .popup-header {
        padding: 30rpx 40rpx;
        border-bottom: 1px solid #f0f0f0;

        .popup-title {
            font-size: 32rpx;
            font-weight: 600;
            color: #333;
        }

        .icon-close {
            font-size: 40rpx;
            color: #999;
        }
    }

    .contract-list-content {
        padding: 0 40rpx;
        max-height: 60vh;

        .contract-item {
            display: flex;
            padding: 30rpx 50rpx 30rpx 0;
            border-bottom: 1px solid #f5f5f5;

            &:last-child {
                border-bottom: none;
            }

            .contract-info {
               
                .contract-sequence {
                    min-width: 60rpx;
                    height: 40rpx;
                    background: #1226aa;
                    color: #fff;
                    font-size: 24rpx;
                    text-align: center;
                    border-radius: 6rpx;
                    margin-right: 20rpx;
                    padding: 0 8rpx;
                }

                .contract-name {
                    width: 360rpx;
                    font-size: 28rpx;
                    color: #333;
                    white-space: normal;
                }
            }

            .contract-action {
                flex-shrink: 0;
                
                .action-btn {
                    width: 120rpx;
                    padding: 12rpx 24rpx;
                    background: #16b777;
                    color: #fff;
                    font-size: 24rpx;
                    border-radius: 8rpx;
                    white-space: nowrap;
                }
            }
        }
    }

    .popup-footer {
        padding: 30rpx 40rpx;
        border-top: 1px solid #f0f0f0;

        .close-btn {
            width: 200rpx;
            height: 80rpx;
            background: #f5f5f5;
            color: #666;
            font-size: 28rpx;
            border-radius: 40rpx;
        }
    }
}